<template>
  
    <div class="view-frame">
      <div  class="view-head">
                  <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>菜单</el-breadcrumb-item>
                    <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
                   
                  </el-breadcrumb>
      </div>
      <div class="view-body">
        <div class="view-body-main">
          <portlet name="菜单管理">
            <el-row>
              <el-col :span="24">
                <!-- <el-row :gutter="20">
                  <el-col :span="6">
                    <el-input v-model="name" placeholder="请输入姓名"></el-input>
                  </el-col>
                  <el-col :span="3">
                    <el-button  icon="search" type="primary"  @click="search">查询</el-button>
                  </el-col>
                  <el-col :span="3">
                    <el-button icon="plus" type="primary"  @click="dialogFormVisible = true">新增</el-button>
                  </el-col>
                  <el-col :span="3">
                    <el-button icon="delete" @click="delet" type="primary">删除</el-button>
                  </el-col>
                  <el-col :span="3">
                    <el-button  icon="edit" type="primary" @click="update">修改</el-button>
                  </el-col>
                </el-row> -->
                <el-row>
                  
                </el-row>
                <el-row>
                  <el-col :span="24">
                      <el-tree
                        :data="data2"
                        :props="defaultProps"
                        node-key="id"
                        default-expand-all
                        :expand-on-click-node="false"
                        v-loading="loading"
                        :render-content="renderContent">
                      </el-tree>
                        
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </portlet>
        </div>
      </div>
      <el-dialog @close="closeMenu" title="新增菜单" v-model="dialogFormVisible0" size='small'>
        <el-form :model="form0">
          <el-form-item label="菜单名称" label-width="70px">
            <el-input v-model="form0.tree_name" auto-complete="off"></el-input>
          </el-form-item>
           <el-form-item label="菜单url" label-width="70px">
            <el-input v-model="form0.tree_url" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="菜单排序" label-width="70px">
            <el-input v-model="form0.tree_sort" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible0 = false">取 消</el-button>
          <el-button type="primary" @click="add">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="修改菜单" v-model="dialogFormVisible1" size='small'>
        <el-form :model="form1">
           <el-form-item label="菜单名称" label-width="70px">
            <el-input v-model="form1.tree_name" auto-complete="off"></el-input>
          </el-form-item>
           <el-form-item label="菜单url" label-width="70px">
            <el-input v-model="form1.tree_url" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="菜单排序" label-width="70px">
            <el-input v-model="form1.tree_sort" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="update">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog  @close='operate_name=""' title="授权" v-model="dialogFormVisible2" size='small'>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-input v-model="operate_name" placeholder="请输入操作名称"></el-input>
          </el-col>
          <el-col :span="4">
            <el-button  icon="search" type="primary"  @click="search">查询</el-button>
          </el-col>
          <el-col :span="4">
            <el-button icon="plus" type="primary"   @click="dialogFormVisible_addOperate = true">新增</el-button>
          </el-col>
          <el-col :span="4">
            <el-button icon="delete" @click="deletOperate" type="primary">删除</el-button>
          </el-col>
          <el-col :span="4">
            <el-button  icon="edit" type="primary" @click="updateOperate">修改</el-button>
          </el-col>
        </el-row>
         <el-table
          :data="operateData"
          style="width: 100%"
          highlight-current-row
          @current-change="handleTableChange">>
          <el-table-column
            prop="operate_name"
            label="操作名称">
          </el-table-column>
          <el-table-column
            prop="operate"
            label="操作码">
          </el-table-column>
        </el-table>
       
      </el-dialog>

      <el-dialog title="修改权限" v-model="dialogFormVisible3" size='small'>
        <el-form :model="form3">
          <el-form-item label="操作名称" label-width="70px">
            <el-input v-model="form3.operate_name" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="操作码" label-width="70px">
            <el-input v-model="form3.operate" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible3 = false">取 消</el-button>
          <el-button type="primary" @click="saveOperate">确 定</el-button>
        </div>
      </el-dialog>
       <el-dialog title="添加权限" v-model="dialogFormVisible_addOperate" size='small'>
        <el-form :model="form_addOperate">
          <el-form-item label="操作名称" label-width="70px">
            <el-input v-model="form_addOperate.operate_name" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="操作码" label-width="70px">
            <el-input v-model="form_addOperate.operate" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible_addOperate = false">取 消</el-button>
          <el-button type="primary" @click="saveAddOperate">确 定</el-button>
        </div>
      </el-dialog>

    </div>
</template>
<script>
    import _default from "./index.js";
    import './index.scss';
    export default _default;
</script>

